<template>
  <van-nav-bar title="地址管理" left-arrow @click-left="onClickLeft" />
  <div class="box" v-for="item in HomeInfo.getInfo">
    <div>
      <div class="box-top" style="display: flex">
        <div class="name">{{ item.name }}</div>
        <div class="phone">{{ item.mobile }}</div>
      </div>
      <div class="con">{{ item.formatted_address }}</div>
      <div style="display: flex; justify-content: space-between">
        <!-- <input type="checkbox"   @click="acqui(item._id)" >默认地址</input> -->
        <div class="mr" @click="acqui(item._id)" style="display: flex">
          <div v-if="!item.is_default" class="iconfont">&#xe619;</div>
          <div style="color: var(--baseColor)" v-else class="iconfont">
            &#xe610;
          </div>
          <span style="margin-left: 10px">默认地址</span>
        </div>
        <div style="display: flex">
          <div @click="deltadd(item._id)">
            <van-icon name="notes-o" /><span>编辑</span>
          </div>
          <div @click="dele(item._id)">
            <van-icon name="delete-o" /><span>删除</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="append" @click="go">
    <van-button type="primary" round size="large">添加地址</van-button>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { getList, deletes, setDefault, getDefault, getInfo } from "@/api/user";
import { showConfirmDialog, showToast } from "vant";
import { useRouter } from "vue-router";
const checked = ref(false);
const router = useRouter();
// 路由跳转
const go = () => {
  router.push({
    name: "address",
  });
};
// 数据存储
const HomeInfo = reactive({
  getInfo: [],
  getId: [],
});
// 跳转上级
const onClickLeft = () => history.back();
// 获取地址列表
function info() {
  getList().then((res) => {
    console.log(res);
    HomeInfo.getInfo = res.rows;
    console.log(res.rows);
  });
  getDefault().then((res) => {
    console.log(res);
  });
  // 收货地址详情  id暂无
  getInfo({
    _id: "",
  }).then((res) => {
    console.log(res);
  });
}
// 传参
function deltadd(e) {
  router.push({ path: "/my/deladdre/", query: { id: e } });
}
// 删除事件
function dele(e) {
  console.log(e);
  showConfirmDialog({
    title: "标题",
    message: "确定要删除此收获地址吗？",
  })
    .then(() => {
      // 确认删除地址

      deletes({
        _id: e,
      }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          showToast({
            message: res.msg,
            icon: "success",
          });
          info();
          console.log(9999);
        }
      });
    })
    .catch(() => {
      // on cancel
    });
}
// 设置为默认地址

function acqui(e) {
  setDefault({ _id: e }).then((res) => {
    if (res.code == 0) {
      showToast({
        message: res.msg,
        icon: "success",
      });
      info();
      // checked.value = true;
      console.log(res);
    }
  });
}
onMounted(() => {
  info();
});
</script>
<style>
.box {
  padding: 0 20px;
}

.box-top {
  padding: 10px 0;
}

.box-top div {
  margin-right: 10px;
}

.con {
  margin-bottom: 10px;
}
.append {
  margin-top: 50px;
}
</style>
